<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      table {
        width: 500px;
        margin: 100px auto;
        border-collapse: collapse;
        text-align: center;
      }
      table caption input {
        width: 60px;
      }
      td,
      th {
        border: 1px solid #333;
      }

      thead tr {
        height: 40px;
        background-color: #ccc;
      }
    </style>
  </head>

  <body>
    <table cellspacing="0">
      <caption>
        姓名：<input type="text" />
        科目：<input type="text" />
        成绩：<input type="number" />
        <button type="button">添加学员信息</button>
      </caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>科目</th>
          <th>成绩</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      // 1.先去准备好学生的数据
      var datas = [
        {
          name: "魏璎珞",
          subject: "JavaScript",
          score: 100,
        },
        {
          name: "弘历",
          subject: "JavaScript",
          score: 98,
        },
        {
          name: "傅恒",
          subject: "JavaScript",
          score: 99,
        },
        {
          name: "明玉",
          subject: "JavaScript",
          score: 88,
        },
        {
          name: "大猪蹄子",
          subject: "JavaScript",
          score: 0,
        },
        {
          name: "陈名禄",
          subject: "javaScript",
          score: 0,
        },
        {
          name: "刘乐平",
          subject: "javaScript",
          score: 0,
        },
      ];
      var tbody = document.querySelector("tbody");
      var inps = document.querySelector("caption").querySelectorAll("input");
      var btn = document.querySelector("button");
      //   创建行，行的数量取决于数组的长度
      for (var i = 0; i < datas.length; i++) {
        var tr = document.createElement("tr");
        tbody.appendChild(tr);
        // 创建行内的单元格，就要遍历数组里每个对象
        for (var k in datas[i]) {
          var td = document.createElement("td");
          tr.appendChild(td);
          td.innerHTML = datas[i][k];
        }
        var td = document.createElement("td");
        td.innerHTML =
          '<a href="javascript:;">删除</a>' +
          "、" +
          '<a href="javascript:;">编辑</a>';
        tr.appendChild(td);
      }
      // 删除功能
      // var as = document.querySelectorAll("a");
      // for (var i = 0; i < as.length; i++) {
      //   as[i].onclick = function () {
      //     tbody.removeChild(this.parentNode.parentNode);
      //   };
      // }

      // 创建一个点击事件，表示不能为空值，否则就提交不了
      btn.addEventListener("click", function () {
        if (inps[0].value == "") {
          alert("学生姓名不可以为空值奥");
        } else if (inps[1].value == "") {
          alert("学生科目不可以为空奥");
        } else if (inps[2].value == "") {
          alert("学生成绩不能为空");
        } else {
          // (inps[0].value != "" && inps[1].value != "" && inps[2].value != "")
          var tr = document.createElement("tr");
          tbody.appendChild(tr);
          for (var i = 0; i < inps.length; i++) {
            var td = document.createElement("td");
            td.innerHTML = inps[i].value;
            tr.appendChild(td);
            inps[i].value = "";
          }
          var td = document.createElement("td");
          td.innerHTML =
            '<a href="javascript:;">删除</a>' +
            "、" +
            '<a href="javascript:;">编辑</a>';
          tr.appendChild(td);
        }
      });
      // 给动态添加的tr添加删除、编辑功能
      // function bianji(){
      tbody.addEventListener("click", function (e) {
        // 获取目前为止所有的行，保活新增的
        var trs = document.querySelector("tbody").querySelectorAll("tr");
        for (var i = 0; i < trs.length; i++) {
          // 获取删除、编辑链接
          var shanchu = trs[i].children[trs[i].children.length - 1].children[0];
          var bianji = trs[i].children[trs[i].children.length - 1].children[1];
          // 获取成绩的单元格
          var grade = trs[i].children[2];
          // 如果真正点击的对象等于删除的链接，即把这行删除
          if (e.target == shanchu) {
            // tbody.removeChild(e.target.parentNode.parentNode)
            e.target.parentNode.parentNode.remove();
          }
          // 如果真正点击的链接是编辑的链接，就进行编辑
          if (e.target == bianji) {
            // 获取点击编辑的行对应的成绩的单元格
            var chengji = e.target.parentNode.parentNode.children[2];
            // 获取点击编辑的行对应的成绩的单元格的值
            var score = e.target.parentNode.parentNode.children[2].innerHTML;
            // console.log(score);
            // console.log(chengji);
            // 将成绩单元格里面的内容换成三个input表单
            chengji.innerHTML = `<input type="text" class='text' style="width:60px">
                <input type="submit" value="保存">
                <input type="submit" value="取消" >`;
            chengji.children[0].value = score;
            // 拿到保存和取消的两个单元格
            // console.log(chengji.children[1]);
            var baocun = chengji.children[1];
            var quxiao = chengji.children[2];
            // 给保存设置点击事件
            baocun.addEventListener("click", function () {
              // console.log(chengji.children[0].value);
              // 将修改后成绩的值赋值给成绩的单元格
              chengji.innerHTML = chengji.children[0].value;
            });
            // 给取消按钮设置点击事件
            quxiao.addEventListener("click", function () {
              chengji.innerHTML = chengji.children[0].value;
            });
          }
        }
      });
    </script>
  </body>
</html>
